<template>
	<view class="bargain">
		<view class="card">
			<view class="total">项目总额：￥{{info.config.money}}</view>
		</view>
		<view class="card">
			<view class="bankInfo">
				<view class="title">
					<view class="left">收款账号</view>
					<view @click="info.handlerCopyBankInfo" class="right">复制收款信息</view>
				</view>
				<view class="info-row">
					<view class="label">收款账户：</view>
					<view class="value">{{info.config.account}}</view>
				</view>
				<view class="info-row">
					<view class="label">收款账号：</view>
					<view class="value">{{info.config.accountNumber}}</view>
				</view>
				<view class="info-row">
					<view class="label">收款银行：</view>
					<view class="value">{{info.config.bank}}</view>
				</view>
				<view class="info-row">
					<view class="label">收款备注：</view>
					<view class="value">{{info.config.remarks}}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="cardInfo">
				<view class="title">
					<view class="left">输入打款信息</view>
					<view @click="info.handlerShowDemo" class="right">查看示例</view>
				</view>
				<view class="info-row">
					<view class="label">打款帐号：</view>
					<view class="value">
						<input v-model="info.accountNumber" type="text" placeholder="请输入打款银行账号" />
					</view>
				</view>
				<view class="info-row">
					<view class="label">打款帐户：</view>
					<view class="value">
						<input v-model="info.account" type="text" placeholder="请输入打款银行账户" />
					</view>
				</view>
				<view class="info-row">
					<view class="label">打款银行：</view>
					<view class="value">
						<input v-model="info.bank" type="text" placeholder="请输入打款银行" />
					</view>
				</view>
				<view class="info-row">
					<view class="label">打款用户：</view>
					<view class="value">
						<input v-model="info.accountUser" type="text" placeholder="请输入打款用户" />
					</view>
				</view>
				<view class="info-row">
					<view class="label">打款时间：</view>
					<view @click="info.openTime" class="value time">
						<text>{{info.time || '请选择'}}</text>
						<uni-icons type="forward" size="16" color="#999" />
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="payimgInfo">
				<view class="title">
					<view class="left">上传打款截图</view>
					<view class="right"></view>
				</view>
				<view class="upload_box">
					<upload v-model="info.picList" :sourceType="['album', 'camera']"
						uploadUrl="/api/mall/order-service-daily/uploadCoverPic"></upload>
					<view class="upload_tips">上传凭证，最多9张。</view>
				</view>
				<view class="remark-area">
					<textarea :maxlength="100" v-model="info.remark" placeholder="请输入备注" class="remark-input" maxlength="100" />
					<view class="word-count">{{info.remark.trim().length}}/100</view>
				</view>
			</view>
		</view>
		<view @click="info.submit" class="xjs-btn-primary">提交</view>
		<serviceCalender class="serviceCalender" ref="serviceCalenderRef" @confirm="getServiceDate"></serviceCalender>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '@/api'
	import serviceCalender from '@/pages/payment/order/components/serviceCalender.vue';
	onLoad(async (e) => {
		info.id = e.id
		await info.getBankConfig()
	})
	const serviceCalenderRef = ref();
	const getServiceDate = (data) => {
		info.time = data.fulldate
	};
	let info = reactive<any>({
		accountNumber: "",
		account:"",
		bank: "",
		accountUser: "",
		time: "",
		remark: "",
		picList: [],
		config: {},
		id:"",
		openTime: () => {
			serviceCalenderRef.value.open();
		},
		handlerShowDemo() {
			uni.previewImage({
				urls: ['https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/bank.jpg'],
			})
		},
		getBankConfig: async () => {
			const res : any = await api({
				method: 'get',
				url: '/mall/content/backend-configs/xjsAccountNumber'
			})
			console.log(res)
			info.config = res.data
		},
		handlerCopyBankInfo: () => {
			const text =
				`收款账户：${info.config.account}\n收款账号：${info.config.accountNumber}\n收款银行：${info.config.bank}\n转款备注：${info.config.remarks}`
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						icon: "none",
						title: "复制成功！"
					})
				},
				fail: () => {
					uni.showToast({
						icon: "none",
						title: "复制失败！"
					})
				}
			});
		},
		submit: async () => {
			let warning = ''
			const filteNonnumericalReg = /\D+/g // 过滤非数字
			if (filteNonnumericalReg.test(info.accountNumber)) {
				warning = '请正确输入打款账号'
			} else if (info.account.trim().length == 0) {
				warning = '请输入打款银户'
			} else if (info.bank.trim().length == 0) {
				warning = '请输入打款银行'
			} else if (info.accountUser.trim().length == 0) {
				warning = '请输入打款用户'
			} else if (!info.time) {
				warning = '请选择打款时间'
			} else if (info.picList.length < 1) {
				warning = '请上传打款截图'
			}
			if (warning) {
				uni.showToast({
					icon: 'none',
					title: warning
				})
				return
			}
			let params = {
				"recordId": info.id,
				"amountMoney": info.config.money,
				"imgUrls": info.picList.join(','),
				"paymentAccount": info.account,
				"paymentTime": info.time,
				"paymentUser": info.accountUser,
				"paymentBank": info.bank,
				"remark": info.remark
			}
			console.log(params)
			const res : any = await api({
				method: 'post',
				url: '/mall/studio/studio-apply-payment-record',
				data:params
			})
			console.log(res)
			if(res.code==0 && res.data){
				uni.showToast({
					mask:true,
					icon:'none',
					title:'提交成功！',
					duration:2000
				})
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/home/index'
					})
				},1800)
			}else{
				uni.showToast({
					mask:true,
					icon:'none',
					title:res.msg
				})
			}
		}

	})
</script>

<style lang="scss" scoped>
	.bargain {
		padding: 32rpx;
		box-sizing: border-box;

		.card {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
		}

		.total {
			font-size: 32rpx;
			color: #333333;
		}

		.bankInfo {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.left {
					font-size: 32rpx;
				}

				.right {
					font-size: 26rpx;
					color: var(--color-primary);
				}
			}

			.info-row:last-child {
				padding-bottom: 0 !important;
			}

			.info-row {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding-bottom: 20rpx;

				.label {
					width: 160rpx;
					color: #7c807f;
				}

				.value {
					width: calc(100% - 190rpx);
					color: #1b2120;
					margin-left: 30rpx;
				}
			}
		}

		.cardInfo {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.left {
					font-size: 32rpx;
				}

				.right {
					font-size: 26rpx;
					color: var(--color-primary);
				}
			}

			.info-row {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding-bottom: 20rpx;

				.label {
					width: 160rpx;
					color: #7c807f;
				}

				.value {
					width: calc(100% - 190rpx);
					color: #7c807f;
					margin-left: 30rpx;

					input {
						color: #7c807f;
						font-size: 28rpx;
					}
				}

				.time {
					text-align: right;
				}
			}
		}

		.payimgInfo {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.left {
					font-size: 32rpx;
				}
			}

			.upload_box {
				box-sizing: border-box;
				margin-bottom: 32rpx;
				border-radius: 12rpx;

				.upload_tips {
					margin-top: 24rpx;
					font-size: 26rpx;
					color: #5C5E5E;
				}
			}

			.remark-area {
				position: relative;
				padding: 24rpx 24rpx 60rpx;
				background-color: var(--pages-bg-color);
				box-sizing: border-box;
				border-radius: 6rpx;

				.remark-input {
					width: 100%;
					height: 200rpx;
					border-radius: 8rpx;
					font-size: 14px;
					box-sizing: border-box;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}
</style>